<template>
  <!-- <div class="orderDetails appMainWarp" v-if="info != ''"> -->
  <div class="orderDetails appMainWarp">
    <el-row v-loading="loading">
      <el-col :span="24">
        <div class="registered-container revenueDetail appMainWarp">
          <div class="abnormal">
            <img src="@/assets/kiosk_images/abnormal.png" alt>
            <span>异常说明：{{ patient.desc }}</span>
          </div>
          <div class="infortant">
            <div class="boder">
              <el-form label-width="30px" label-position="left">
                <div class="applicant">
                  <div class="prominent" />
                  <span>患者信息</span>
                </div>
                <el-form-item>
                  <div class="orderItem">
                    <span>患者姓名:{{ patient.patient_name }}</span>
                  </div>

                  <!-- <div class="orderItem">
                    <span>性别:{{ patient.patient_id }}</span>
                  </div> -->

                  <div class="orderItem">
                    <span>就诊卡号:{{ patient.patient_id }}</span>
                  </div>

                  <div class="orderItem">
                    <span>业务类型:{{ patient.bill_type_name }}</span>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div v-if="self.length > 0" class="boder">
              <el-collapse v-model="activeSelf">
                <el-collapse-item v-for="(item, index) in self" :key="index" name="1">
                  <template slot="title" class="collapse-title">
                    <div class="applicant">
                      <div class="prominent" />
                      <span v-if="item.trans_type===1">支付场景订单信息(正交易)</span>
                      <span v-if="item.trans_type===2">支付场景订单信息(负交易)</span>
                    </div>
                  </template>
                  <div style="margin-left:30px">
                    <div class="orderItem">
                      <span>交易院区：</span>
                      {{ item.hospital_area_name }}
                    </div>
                    <div class="orderItem">
                      <span>{{ item.trans_type===1? '支付时间': '退款时间' }}：</span>
                      {{ item.trans_time }}
                    </div>
                    <div class="orderItem">
                      <span>支付场景：</span>
                      {{ item.system_name }}
                    </div>
                    <div class="orderItem">
                      <span>支付场景订单号：</span>
                      {{ item.self_order_no }}
                    </div>
                    <div class="orderItem">
                      <span>交易金额：</span>
                      {{ item.pay_fee }}
                    </div>
                    <div class="orderItem">
                      <span>交易类型：</span>
                      {{ item.trans_type===1?'正交易':'负交易' }}
                    </div>
                    <div class="orderItem">
                      <span>业务类型：</span>
                      {{ item.bill_type_name }}
                    </div>
                    <div class="orderItem">
                      <span>支付方式：</span>
                      {{ item.pay_style_name }}
                    </div>
                    <div class="orderItem">
                      <span>交易流水号：</span>
                      {{ item.transcation_id }}
                    </div>
                    <div class="orderItem">
                      <span>订单状态：</span>
                      {{ item.pay_status===1?'交易成功':'' }}
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div v-if="his.length > 0" class="boder">
              <el-collapse v-model="activeHis">
                <el-collapse-item v-for="(item, index) in his" :key="index" name="1">
                  <template slot="title" class="collapse-title">
                    <div class="applicant">
                      <div class="prominent" />
                      <span v-if="item.trans_type===1">HIS系统订单信息(正交易)</span>
                      <span v-if="item.trans_type===2">HIS系统订单信息(负交易)</span>
                    </div>
                  </template>
                  <div style="margin-left:30px">
                    <div class="orderItem">
                      <span>交易院区：</span>
                      {{ item.hospital_area_name }}
                    </div>
                    <div class="orderItem">
                      <span>{{ item.trans_type===1? '支付时间': '退款时间' }}：</span>
                      {{ item.trans_time }}
                    </div>
                    <div class="orderItem">
                      <span>支付场景：</span>
                      {{ item.system_name }}
                    </div>
                    <div class="orderItem">
                      <span>支付场景订单号：</span>
                      {{ item.self_order_no }}
                    </div>
                    <div class="orderItem">
                      <span>交易金额：</span>
                      {{ item.pay_fee }}
                    </div>
                    <div class="orderItem">
                      <span>交易类型：</span>
                      {{ item.trans_type===1?'正交易':'负交易' }}
                    </div>
                    <div class="orderItem">
                      <span>业务类型：</span>
                      {{ item.bill_type_name }}
                    </div>
                    <div class="orderItem">
                      <span>支付方式：</span>
                      {{ item.pay_style_name }}
                    </div>
                    <div class="orderItem">
                      <span>交易流水号：</span>
                      {{ item.transcation_id }}
                    </div>
                    <div class="orderItem">
                      <span>订单状态：</span>
                      {{ item.pay_status===1?'交易成功':'' }}
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div v-if="bank.length > 0" class="boder">
              <el-collapse v-model="activeBank">
                <el-collapse-item v-for="(item, index) in bank" :key="index" name="1">
                  <template slot="title" class="collapse-title">
                    <div class="applicant">
                      <div class="prominent" />
                      <span v-if="item.trans_type===1">支付系统信息(正交易)</span>
                      <span v-if="item.trans_type===2">支付系统信息(负交易)</span>
                    </div>
                  </template>
                  <div style="margin-left:30px">
                    <div class="orderItem">
                      <span>交易院区：</span>
                      {{ item.hospital_area_name }}
                    </div>
                    <div class="orderItem">
                      <span>{{ item.trans_type===1? '支付时间': '退款时间' }}：</span>
                      {{ item.trans_time }}
                    </div>
                    <div class="orderItem">
                      <span>支付场景：</span>
                      {{ item.system_name }}
                    </div>
                    <div class="orderItem">
                      <span>支付场景订单号：</span>
                      {{ item.self_order_no }}
                    </div>
                    <div class="orderItem">
                      <span>交易金额：</span>
                      {{ item.pay_fee }}
                    </div>
                    <div class="orderItem">
                      <span>交易类型：</span>
                      {{ item.trans_type===1?'正交易':'负交易' }}
                    </div>
                    <div class="orderItem">
                      <span>业务类型：</span>
                      {{ item.bill_type_name }}
                    </div>
                    <div class="orderItem">
                      <span>支付方式：</span>
                      {{ item.pay_style_name }}
                    </div>
                    <div class="orderItem">
                      <span>交易流水号：</span>
                      {{ item.transcation_id }}
                    </div>
                    <div class="orderItem">
                      <span>订单状态：</span>
                      {{ item.pay_status===1?'交易成功':'' }}
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <!-- <div class="boder">
              <el-form label-width="30px" label-position="left">
                <div class="applicant">
                  <div class="prominent" />
                  <span>HIS系统订单信息</span>
                </div>
                <el-form-item>
                  <div class="orderItem">
                    <span>交易类型：</span>
                    {{ his.trans_type }}
                  </div>
                  <div class="orderItem">
                    <span>HIS系统订单号：</span>
                    {{ his.his_order_no }}
                  </div>
                  <div class="orderItem">
                    <span>交易金额：</span>
                    {{ his.his_pay_fee }}
                  </div>
                  <div class="orderItem">
                    <span>交易时间：</span>
                    {{ his.trans_time }}
                  </div>
                </el-form-item>
              </el-form>
            </div> -->
            <div class="boder">
              <el-form>
                <el-form-item label="处理状态：" prop="is_handle">
                  <el-radio-group v-model="patient.is_handle">
                    <el-radio disabled :label="1">已处理</el-radio>
                    <el-radio disabled :label="2">未处理</el-radio>
                  </el-radio-group>
                </el-form-item>
                <div class="logoWarp">
                  <el-form-item label="备注:">
                    <el-input
                      v-model="patient.handle_desc"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                    />
                  </el-form-item>
                </div>
                <div class="margincont ">
                  <el-button type="primary" :disabled="patient.is_handle===1" @click="preservation">保 存</el-button>
                  <el-button v-if="patient.need_refund===1" type="success" @click="toRefund(patient.out_trade_no,$route.query.type,$route.query.time)">去退款</el-button>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- <div v-else class="naDate">
    目前暂无数据
  </div>-->
</template>
<script>
import { orderDetail, editOrder } from '@/api/detailed/index'

// import { healthregisteredInfo } from '@/api/page/experienceAppointment/index'

export default {
  name: 'RevenueDetail',
  data() {
    return {
      loading: false,
      activeSelf: '1',
      activeHis: '1',
      activeBank: '1',
      patient: {},
      self: {},
      bank: {},
      his: {}
    }
  },
  mounted() {
    this.infoClick()
  },
  methods: {
    infoClick() {
      const that = this
      const params = {}
      params.id = this.$route.query.id
      params.type = this.$route.query.type
      params.transtype = Number(this.$route.query.transtype)
      that.loading = true
      orderDetail(params)
        .then(res => {
          that.loading = false
          that.patient = res.data.bill_info
          that.self = res.data.self_order
          that.bank = res.data.three_order
          that.his = res.data.his_order
        })
        .catch(error => {
          that.$message({
            message: error
          })
        })
    },
    preservation() {
      var that = this
      var params = {}
      // params.is_handle = that.patient.is_handle
      params.remark = that.patient.handle_desc
      params.id = this.$route.query.id
      params.type = this.$route.query.type
      editOrder(params)
        .then(res => {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.infoClick()
        })
        .catch(error => {
          that.$message({
            message: error
          })
        })
    },
    toRefund(tradeNo, type, time) {
      this.$router.push({
        path: '/refundManagement/refund', query: { tradeNo: tradeNo, type: type, time: time, status: this.$route.query.status }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.revenueDetail {
  background: #fff;
  .abnormal {
    width: 100%;
    height: 70px;
    background: rgba(237, 109, 61, 0.16);
    border: 1px solid rgba(243, 175, 61, 1);
    display: flex;
    align-items: center;
    padding-left: 49px;
    img {
      width: 34px;
      height: 34px;
    }
    span {
      font-size: 20px;
      // font-family:Microsoft YaHei;
      font-weight: bold;
      color: rgba(255, 77, 79, 1);
      line-height: 40px;
      padding-left: 30px;
    }
  }
  .infortant {
    padding: 20px 0 30px 47px;
  }
  .applicant {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    .prominent {
      width: 4px;
      height: 24px;
      background: rgba(87, 158, 248, 1);
      border-radius: 2px;
    }
    span {
      padding-left: 19px;
      font-size: 20px;
      color: #232d50;
      font-weight: bold;
    }
  }
  .orderItem {
    display: inline-block;
    vertical-align: top;
    width: 380px;
    span {
      font-size: 15px;
      color: #333;
      font-weight: 400;
    }
  }
}
.boder-two {
  border: 1px solid #e5e5e5;
}
.margincont {
  display: flex;
  justify-content: center;
  margin-right: 120px;
}
.img {
  width: 200px;
  height: 200px;
}
.imgflex + .imgflex {
  margin: 0 0 0 20px;
}
.el-textarea {
  width: 80%;
}
.el-button--medium {
  width: 200px;
  height: 40px;
}

.el-form-item {
  margin-bottom: 10px;
}
.naDate {
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.el-button--success{
  background-color: #e8f4ff;
  color: #579ef8;
  border: 1px solid #579ef8;
  }
</style>
<style>
.revenueDetail .el-form-item__content {
  margin-left: 23px !important;
}
.revenueDetail .logoWarp .el-textarea__inner {
  height: 116px;
  padding: 5px 15px;
  box-sizing: border-box;
}
</style>
